<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body{
            margin-bottom: 800px;
        }
        .box{
            display: flex;
            flex-flow: column nowrap;
        }
    </style>
    <script src="./js/vue.js"></script>
</head>
<body>
    <div id="app">
        <!-- 
        v-show
            - 取值：any
            - 功能：根据表达式的boolean结果，切换元素的 display CSS 属性，控制元素显示隐藏
            - 示例：<p v-show=" flag "></p>
            - !! 被隐藏的元素将被添加 行内 display:none 样式，显示将删除该样式
        -->
        <p>flag:{{ flag }}</p>
        <!-- <p class="box" style="color: red;" :style=" `display:${ flag?'block':'none' };` " > -->
        <p class="box" style="color: red;" :style=" flag?'':'display:none' " >
            <span>第一个P标签</span>
            <span>第一个P标签</span>
            <span>第一个P标签</span>
            <span>第一个P标签</span>
        </p>
        <p class="box" style="color: blue;" :style=" `display:${ !flag?'block':'none' };` " >
            <span>第二个P标签</span>
            <span>第二个P标签</span>
            <span>第二个P标签</span>
            <span>第二个P标签</span>
        </p>
        <hr>
        <p class="box" style="color: red;" v-show="flag">
            <span>第一个P标签</span>
            <span>第一个P标签</span>
            <span>第一个P标签</span>
            <span>第一个P标签</span></p>
        <p class="box" style="color: blue;" v-show="!flag">
            <span>第二个P标签</span>
            <span>第二个P标签</span>
            <span>第二个P标签</span>
            <span>第二个P标签</span>
        </p>
        <input type="button" value="切换显示" @click=" flag=!flag ">
        <hr>
        <!--
        v-if、v-else-if、v-else
            - 取值：
                - v-if：any
                - v-else-if：any
                - v-else：不需要表达式，该指令为boolean类型属性
            - 用法：根据表达式的boolean结果，执行元素的创建和删除操作
            - 示例：
                <div v-if="type === 'A'">A</div>
                <div v-else-if="type === 'B'">B</div>
                <div v-else>Not A/B/C</div>
            - v-else 指令的上一个元素 必须使用了 v-if 或者 v-else-if
            - v-else-if 指令的上一个元素 必须使用了 v-if 
            !!! 阻断渲染 - 减少页面中的一些调用语法错误

        -->
        <p class="box" style="color: red;" v-if="flagA">
            <span>第一个P标签</span>
            <span>第一个P标签</span>
            <span>第一个P标签</span>
            <span>第一个P标签</span></p>
        <p class="box" style="color: blue;" v-if="!flagA">
            <span>第二个P标签</span>
            <span>第二个P标签</span>
            <span>第二个P标签</span>
            <span>第二个P标签</span>
        </p>
        <input type="button" value="切换显示" @click=" flagA=!flagA ">
        <hr>
        <div>
            <p>名称:{{ user.name||'没有定义名称' }}</p>
            <p>技能:</p>
            <ul>
                <li v-show="!user.skills">没有技能</li>
                <!-- <li v-show="user.skills">{{ user.skills[0] }}</li>
                <li v-show="user.skills">{{ user.skills[1] }}</li> -->
                <li v-if="user.skills">{{ user.skills[0] }}</li>
                <li v-if="user.skills">{{ user.skills[1] }}</li>
            </ul>
        </div>
        <hr>
        <p v-if=" code=='A' " style="color:red;">code=="A"---{{ code }}</p>
        <!-- <hr> -->
        <p v-else-if=" code=='B' " style="color:blue;">code=="B"---{{ code }}</p>
        <p v-else-if=" code=='C' " style="color:pink;">code=="C"---{{ code }}</p>
        <p v-else style="color:green;">没有匹配---{{ code }}</p>
        <input type="text" :value="code" @input=" code = $event.target.value ">

    </div>
</body>
<script>
    new Vue({
        el:"#app",
        data:{
            flag:true,
            flagA:true,
            // user:{
            //     name:"tom",
            //     skills:[ "html","js" ]
            // }
            user:{},
            code:"A"
        }
    })
</script>
</html>